/**
 * Created by Ysssssss on 2021/4/21.
 */
import React, {useState, useCallback} from 'react'
import getCdnUrl from "@utils/getCdnUrl";
import {priceFenToYuan} from "@utils/priceConversion";

const OrderLine = props => {
    const {
        orderInfo,
        titleLine = '',
        productListKey ='',
        columns = [],
    } = props
    const [ fold, setFold ] = useState(true)

    const showAllProduct = useCallback(() => {
        setFold(!fold)
    }, [fold])

    return (
        <div className="order-line">
            <div className="order-line-header">
                { titleLine }
            </div>
            <div className="order-line-body">
                { productListKey ? (
                    <div className="order-line-product-container">
                        { (fold ? (orderInfo[productListKey].slice(0,3)) : orderInfo[productListKey]).map((prod,index) => (
                            <div className="order-line-product" key={prod.id}>
                                <div className="flex">
                                    <img className="product-img" src={getCdnUrl(prod.title_pic || prod.pic)} alt=""/>
                                    <div className="order-line-col mgl-16 flex-vertical-center" style={{width: '200px'}}>
                                        <div className="ft-clr-d w-100 ft-12 text-overflow">{ prod.prod_name }</div>
                                        { prod.sku_name ? (
                                            <div className="ft-clr-ml w-100 ft-12 text-overflow mgt-8">{ prod.sku_name }</div>
                                        ) : null }
                                    </div>
                                </div>
                                <div className="order-line-col ">
                                    <div className="ft-clr-d ft-12 txr">￥{ priceFenToYuan(prod.price) }</div>
                                    <div className="ft-clr-d ft-12 mgt-8 txr">x{ prod.quantity }</div>
                                </div>
                            </div>
                        )) }
                        {orderInfo[productListKey].length > 3 ? (
                            <div className="ft-12 ft-clr-l mgt-24 cur-poi" onClick={showAllProduct}>{fold ? '展开全部商品' : '收起商品'}</div>
                        ) : null}
                    </div>
                ) : null }
                { columns.map(column => (
                    <div key={column.key} className="order-line-col" style={{width: column.width || '10%'}}>
                        { column.render ? column.render(orderInfo[column.dataIndex], orderInfo) : orderInfo[column.dataIndex]}
                    </div>
                )) }
            </div>
        </div>
    )
}

export default OrderLine